<template>
  <div class="ratings" ref="ratings">
    <div class="ratings-content">
      <div class="overview">
        <div class="overview-left">
          <h1 class="score">{{info.score}}</h1>
          <div class="title">综合评分</div>
          <div class="rank">高于周边商家90%</div>
        </div>
        <div class="overview-right">
          <div class="score-wrapper">
            <span class="title">服务态度</span>
            <Star :score="info.serviceScore" :size="36" v-if="info.serviceScore" />
            <span class="score">{{info.serviceScore}}</span>
          </div>
          <div class="score-wrapper">
            <span class="title">商品评分</span>
            <Star :score="info.foodScore" :size="36" v-if="info.foodScore" />
            <span class="score">{{info.foodScore}}</span>
          </div>
          <div class="delivery-wrapper">
            <span class="title">送达时间</span>
            <span class="delivery">{{info.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>

      <div class="split"></div>

      <score-filter
        :onlyShowText="onlyShowText"
        :selectType="selectType"
        @toggleOnlyText="toggleOnlyText"
        @setSelectType="setSelectType"
      ></score-filter>

      <!-- 由于需要过滤数据，不能使用原来的ratings直接获取全部评论，需要加工一下显示不同的内容 -->
      <div class="rating-wrapper" v-for="item in filterRatings" :key="item.rateTime">
        <ul>
          <li class="rating-item">
            <div class="avatar">
              <img width="28" height="28" :src="item.avatar" />
            </div>
            <div class="content">
              <h1 class="name">{{item.username}}</h1>
              <div class="star-wrapper">
                <Star :score="item.score" :size="24" />
                <span class="delivery">{{item.deliveryTime}}</span>
              </div>
              <p class="text" v-if="item.text">{{item.text}}</p>
              <div class="recommend">
                <span
                  class="iconfont"
                  :class="item.rateType ===0 ? 'icon-thumb_up' : 'icon-thumb_down'"
                ></span>
                <span class="item" v-for="comment in item.recommend" :key="comment">{{comment}}</span>
                <span>fdjkfj</span>
              </div>
              <div class="time">{{ item.rateTime | dateFormat}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
import Star from "../../../components/content/star/Star";
import ScoreFilter from "../../../components/content/scorefilter/ScoreFilter";
import BScroll from "better-scroll";
import { mapState } from "vuex";
export default {
  data() {
    return {
      onlyShowText: true, // 只显示文本内容
      selectType: 2 // 当前选中的是全部
    };
  },
  mounted() {
    this._initScroll();
  },
  watch: {
    ratings() {
      // 创建单一的实例对象，否则会调用多次造成值得叠加
      this.$nextTick(() => {
        this._initScroll();
      });
    }
  },
  methods: {
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.ratings, {
          click: true
        });
      }
    },

    toggleOnlyText() {
      this.onlyShowText = !this.onlyShowText;
    },

    setSelectType(type) {
      this.selectType = type;
    }
  },
  computed: {
    ...mapState({
      ratings: state => state.shop.shop_score,
      info: state => state.shop.shop_merchants
    }),

    filterRatings() {
      const { ratings, onlyShowText, selectType } = this;
      
      /**
       * 过滤条件
       *
       * 1.选中显示哪些内容：
       * selectType： 0/1/2  0——好 1——不好 2——全部
       * info.rateType： 0/1 0——好 1——不好
       *
       * selectType === 2 || info.rateType === selectType
       * 选中全部就显示全部评论，选中 推荐/不好 就需要根据接口的rateType来显示 推荐/不好 的内容
       *
       * 2. 是否显示文本：
       * info.text : 有值/没值
       * onlyShowText: true / false
       *
       * !onlyShowText || onlyShowText && info.text > 0
       * 如果没有选中只显示文本【即显示全部】，如果只显示文本，文本为空的不显示
       *
       * if(selectType === 2){
       *    if(!onlyShowText){
       *      return ratings
       *    }else if(onlyShowText && info.text > 0){
       *      return ratings.filter(ratings.text > 0)
       *    }
       * }else if(info.rateType === selectType){
       *    if(!onlyShowText){
       *      return ratings
       *    }else if(onlyShowText && info.text > 0){
       *      return ratings.filter(ratings.text > 0)
       *    }
       * }
       */

      // 计算产生结果数据, 并返回
      return ratings.filter(rating => {
          const {rateType, text} = rating
            /*
            条件1
            selectType: 0/1/2
            rateType: 0/1

            selectType===2 || selectType===rateType

             */

            /*
            条件2
            onlyText: true/false
            text: 有值/没值

            onlyText===false || text.length>0

             */

            return (selectType===2 || selectType===rateType) && (!onlyShowText || text.length>0)
        })
    }
  },
  components: {
    Star,
    ScoreFilter
  },
  filters: {
    dateFormat: function(originVal) {
      const dt = new Date(originVal);

      const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");

      const hh = (dt.getHours() + "").padStart(2, "0");
      const mm = (dt.getMinutes() + "").padStart(2, "0");
      const ss = (dt.getSeconds() + "").padStart(2, "0");

      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
    }
  }
};
</script>
<style lang='less' scoped>
.ratings {
  position: absolute;
  top: 225px;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  background: #fff;
  .overview {
    display: flex;
    padding: 18px 0;
    .overview-left {
      flex: 0 0 137px;
      padding: 6px 0;
      width: 137px;
      border-right: 1px solid rgba(7, 17, 27, 0.1);
      text-align: center;
      @media screen and (max-width: 320px) {
        flex: 0 0 120px;
        width: 120px;
      }
      .score {
        margin-bottom: 6px;
        line-height: 28px;
        font-size: 24px;
        color: rgb(255, 153, 0);
      }
      .title {
        margin-bottom: 8px;
        line-height: 12px;
        font-size: 12px;
        color: rgb(7, 17, 27);
      }
      .rank {
        line-height: 10px;
        font-size: 10px;
        color: rgb(147, 153, 159);
      }
    }
    .overview-right {
      flex: 1;
      padding: 6px 0 6px 24px;
      @media screen and (max-width: 320px) {
        padding-left: 6px;
      }
      .score-wrapper {
        margin-bottom: 8px;
        font-size: 0;
        .title {
          display: inline-block;
          line-height: 18px;
          vertical-align: top;
          font-size: 12px;
          color: rgb(7, 17, 27);
        }
        .star {
          display: inline-block;
          margin: 0 12px 0 0;
          vertical-align: top;
        }
        .score {
          display: inline-block;
          line-height: 18px;
          vertical-align: top;
          font-size: 12px;
          color: rgb(255, 153, 0);
        }
      }
      .delivery-wrapper {
        font-size: 0;
        .title {
          line-height: 18px;
          font-size: 12px;
          color: rgb(7, 17, 27);
        }
        .delivery {
          margin-left: 12px;
          font-size: 12px;
          color: rgb(147, 153, 159);
        }
      }
    }
  }
  .rating-wrapper {
    padding: 0 18px;
    .rating-item {
      display: flex;
      padding: 18px 0;
      .avatar {
        flex: 0 0 28px;
        width: 28px;
        margin-right: 12px;
        img {
          border-radius: 50%;
        }
      }
      .content {
        position: relative;
        flex: 1;
        .name {
          margin-bottom: 4px;
          line-height: 12px;
          font-size: 10px;
          color: rgb(7, 17, 27);
        }
        .star-wrapper {
          margin-bottom: 6px;
          font-size: 0;
          .star {
            display: inline-block;
            margin-right: 6px;
            vertical-align: top;
            margin-left: 0;
          }
          .delivery {
            display: inline-block;
            vertical-align: top;
            line-height: 12px;
            font-size: 10px;
            color: rgb(147, 153, 159);
          }
        }
        .text {
          margin-bottom: 8px;
          line-height: 18px;
          color: rgb(7, 17, 27);
          font-size: 12px;
        }
        .recommend {
          line-height: 16px;
          font-size: 0;
          .icon-thumb_up,
          .icon-thumb_down,
          .item {
            display: inline-block;
            margin: 0 8px 4px 0;
            font-size: 9px;
          }
          .icon-thumb_up {
            color: #f5a100;
          }
          .icon-thumb_down {
            color: rgb(147, 153, 159);
          }
          .item {
            padding: 0 6px;
            border: 1px solid rgba(7, 17, 27, 0.1);
            border-radius: 1px;
            color: rgb(147, 153, 159);
            background: #fff;
          }
        }
        .time {
          position: absolute;
          top: 0;
          right: 0;
          line-height: 12px;
          font-size: 10px;
          color: rgb(147, 153, 159);
        }
      }
    }
  }
}
</style>